<template>
  <div class="overview-content">
    <!---->
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="24" style="margin-bottom:20px;">
        <div class="chart-wrapper inputTop">
          <ul class="flex-row">
            <li v-for="(item,index) in arr" :key="index" :class="active==index?'active':''" @click="tab(index)">{{ item }}</li>
          </ul>
        </div>
      </el-col>
    </el-row>
    <!---->
    <div>
        <my-table :table-data="arrTable" v-if="active == 0 ">
            <el-table-column
              prop="num1"
              label="租约编号"
              min-width="50%"
              align="center"
            >
            <template slot-scope="scope">
                <router-link :to="{path: '', query:{}}" class="linkBtn">
                  {{ scope.row.num1 }}
                </router-link>
              </template>
            </el-table-column>
            <el-table-column
              prop="num2"
              label="状态"
              min-width="50%"
              align="center"
            />
            <el-table-column
              prop="num3"
              label="起始日期"
              min-width="50%"
              align="center"
            />
            <el-table-column
              prop="num4"
              label="截止日期"
              min-width="50%"
              align="center"
            />
            <el-table-column
              prop="num5"
              label="租金"
              min-width="50%"
              align="center"
            />
        </my-table>
        <my-table :table-data="arrTable" v-if="active == 1 ">
            <el-table-column
              prop="num1"
              label="售房编号"
              min-width="50%"
              align="center"
            >
                        <template slot-scope="scope">
                <router-link :to="{path: '', query:{}}" class="linkBtn">
                  {{ scope.row.num1 }}
                </router-link>
              </template>
            </el-table-column>
            <el-table-column
              prop="num2"
              label="状态"
              min-width="50%"
              align="center"
            />
            <el-table-column
              prop="num3"
              label="起售日期"
              min-width="50%"
              align="center"
            />
            <el-table-column
              prop="num4"
              label="售出日期"
              min-width="50%"
              align="center"
            />
            <el-table-column
              prop="num5"
              label="售价"
              min-width="50%"
              align="center"
            />
        </my-table>
        <my-table :table-data="arrTable" v-if="active == 2 ">
            <el-table-column
              prop="num1"
              label="月份"
              min-width="50%"
              align="center"
            >
                        <template slot-scope="scope">
                <router-link :to="{path: '', query:{}}" class="linkBtn">
                  {{ scope.row.num1 }}
                </router-link>
              </template>
            </el-table-column>
            <el-table-column
              prop="num2"
              label="收入"
              min-width="50%"
              align="center"
            />
            <el-table-column
              prop="num3"
              label="支出"
              min-width="50%"
              align="center"
            />
            <el-table-column
              prop="num4"
              label="净收入"
              min-width="50%"
              align="center"
            />
            <el-table-column
              prop="num5"
              label="结算日期"
              min-width="50%"
              align="center"
            />
        </my-table>
         <my-table-renting :table-data="arrTable" v-if="active == 3 ">
                        <el-table-column
              prop="num1"
              label="报告类型"
              min-width="50%"
              align="center"
            >
            <template slot-scope="scope">
                <router-link :to="{path: '', query:{}}" class="linkBtn">
                  {{ scope.row.num1 }}
                </router-link>
              </template>
            </el-table-column>
            <el-table-column
              prop="num2"
              label="检查日期"
              min-width="50%"
              align="center"
            />
            <el-table-column
              prop="num3"
              label="发送日期"
              min-width="50%"
              align="center"
            />
            <el-table-column
              prop="num4"
              label="维修建议"
              min-width="50%"
              align="center"
            />
            <el-table-column
              prop="num5"
              label="操作"
              min-width="50%"
              align="center"
            >
          <span  @click="handleClick(scope.$index)" class="countFsColor">查看</span>
            </el-table-column>
         </my-table-renting>
         <my-table-renting :table-data="arrTable" v-if="active == 4 ">
                        <el-table-column
              prop="num1"
              label="维修项目"
              min-width="50%"
              align="center"
            >
              <template slot-scope="scope">
                <router-link :to="{path: '', query:{}}" class="linkBtn">
                  {{ scope.row.num1 }}
                </router-link>
              </template>
            </el-table-column>
            <el-table-column
              prop="num2"
              label="报修日期"
              min-width="50%"
              align="center"
            />
            <el-table-column
              prop="num3"
              label="维修完成日期"
              min-width="50%"
              align="center"
            />
            <el-table-column
              prop="num4"
              label="实际费用"
              min-width="50%"
              align="center"
            />
            <el-table-column
              prop="num4"
              label="状态"
              min-width="50%"
              align="center"
            />
            <el-table-column
              prop="num5"
              label="操作"
              min-width="50%"
              align="center"
            >
                  <span  @click="handleClick(scope.$index)" class="countFsColor">查看</span>
            </el-table-column>
         </my-table-renting>
         <my-table-renting :table-data="arrTable" v-if="active == 5 ">
           <el-table-column
              prop="num1"
              label="费用类型"
              min-width="50%"
              align="center"
            >
                        <template slot-scope="scope">
                <router-link :to="{path: '', query:{}}" class="linkBtn">
                  {{ scope.row.num1 }}
                </router-link>
              </template>
           </el-table-column>
            <el-table-column
              prop="num2"
              label="产生日期"
              min-width="50%"
              align="center"
            />
            <el-table-column
              prop="num3"
              label="缴费日期"
              min-width="50%"
              align="center"
            />
            <el-table-column
              prop="num4"
              label="费用金额"
              min-width="50%"
              align="center"
            />
            <el-table-column
              prop="num4"
              label="状态"
              min-width="50%"
              align="center"
            />
            <el-table-column
              prop="num5"
              label="操作"
              min-width="50%"
              align="center"
            >
                  <span  @click="handleClick(scope.$index)" class="countFsColor">查看</span>
            </el-table-column>
         </my-table-renting>
         <my-table-file :table-data="arrTable" v-if="active == 6 ">
          <el-table-column
              prop="num1"
              label="费用类型"
              min-width="50%"
              align="center"
            >
              <template slot-scope="scope">
                <router-link :to="{path: '', query:{}}" class="linkBtn">
                  {{ scope.row.num1 }}
                </router-link>
              </template>
           </el-table-column>
            <el-table-column
              prop="num2"
              label="保险名称"
              min-width="50%"
              align="center"
            />
            <el-table-column
              prop="num3"
              label="保险公司"
              min-width="50%"
              align="center"
            />
            <el-table-column
              prop="num4"
              label="保费"
              min-width="50%"
              align="center"
            />
            <el-table-column
              prop="num4"
              label="起保日期"
              min-width="50%"
              align="center"
            />
            <el-table-column
              prop="num4"
              label="截止日期"
              min-width="50%"
              align="center"
            />
            <el-table-column
              prop="num4"
              label="附件"
              min-width="50%"
              align="center"
            >
              <span class="countFsColor">保单.pdf 付款凭证.png</span>
            </el-table-column>
            <el-table-column
              prop="num5"
              label="操作"
              min-width="50%"
              align="center"
            >
                  <span  @click="handleClick(scope.$index)" class="countFsColor">查看</span>
            </el-table-column>
         </my-table-file>
         <my-table-file-true :table-data="arrTable" v-if="active == 7 ">
          <el-table-column
              prop="num1"
              label="文件名称"
              min-width="50%"
              align="center"
            >
              <template slot-scope="scope">
                <router-link :to="{path: '', query:{}}" class="linkBtn">
                  {{ scope.row.num1 }}
                </router-link>
              </template>
           </el-table-column>
            <el-table-column
              prop="num2"
              label="上传日期"
              min-width="50%"
              align="center"
            />
            <el-table-column
              prop="num3"
              label="文件类型"
              min-width="50%"
              align="center"
            />
            <el-table-column
              prop="num5"
              label="操作"
              min-width="50%"
              align="center"
            >
                  <span  @click="handleClick(scope.$index)" class="countFsColor mtlr5">查看</span>
                  <span  @click="handleClick(scope.$index)" class="countFsColor mtlr5">下载</span>
                  <span  @click="handleClick(scope.$index)" class="countFsColor mtlr5">删除</span>
            </el-table-column>
         </my-table-file-true>
         <my-table-renting-admin :table-data="arrTable" v-if="active == 8 ">
          <el-table-column
              prop="num1"
              label="管理角色"
              min-width="50%"
              align="center"
            >
           </el-table-column>
            <el-table-column
              prop="num2"
              label="名称"
              min-width="50%"
              align="center"
            />
            <el-table-column
              prop="num3"
              label="联系方式"
              min-width="50%"
              align="center"
            />
            <el-table-column
              prop="num5"
              label="操作"
              min-width="50%"
              align="center"
            >
                  <span  @click="handleClick(scope.$index)" class="countFsColor mtlr5">删除</span>
            </el-table-column>
         </my-table-renting-admin>
    </div>
    <!---->
  </div>
</template>

<script>
import myTable from './tableDetail'  //租房-0 售房-1 账单-2
import myTableRenting from './tableDetailRenting'  //报告-3 维修-4 缴费-5
import myTableFile from './tableDetailFile'  //保险-6
import myTableFileTrue from './tableDetailFileTrue'  //文件-7 
import myTableRentingAdmin from './tableDetailRentingAdmin'  //管理-8 
export default {
  components: {
    myTable,
    myTableRenting,
    myTableFile,
    myTableFileTrue,
    myTableRentingAdmin
  },
  data() {
    return {
      active: 0,
      arr: ['租约', '售房', '账单', '报告', '维修', '缴费', '保险', '文件', '管理信息'],
      arrTable: [
        { num1: 'ZY20200001', num2: '待生效', num3: '2019.09.11', num4: '2020.09.10', num5: '$500.00／周' },
        { num1: 'ZY20200001', num2: '待生效', num3: '2019.09.11', num4: '2020.09.10', num5: '$500.00／周' },
        { num1: 'ZY20200001', num2: '待生效', num3: '2019.09.11', num4: '2020.09.10', num5: '$500.00／周' }
      ],
    }
  },
  methods: {
    tab(v) {
      this.active = v
    },
        handleClick() {

    },
  }
}
</script>

<style lang="scss" scoped>
.overview-content{margin-bottom: -25px;margin-top: 10px;}
.inputTop li.active{background: #5AC6B7;color: #fff;}
.inputTop li{background: #DDE1E1;cursor: pointer; margin-right: 6px; color: #1a1a1a;width: 105px;height: 45px;border-radius: 4px;line-height: 45px;text-align: center;}
</style>

